<template>
    <div class="container" v-if="albumItem">
        <router-link v-if="type == 'similarEditingList'" :to="`/detail?id=${albumItem.albumId}`" class="album-container">
            <div class="album-top">
                <img :src="`https://imagev2.xmcdn.com/${albumItem.coverPath}`"
                    alt="">
                <div class="album-cover-panel">
                    <VideoPlay style="width:15px; height: 15px; vertical-align: bottom;" />
                    {{ Math.floor(albumItem.playCount / 10000) }}万
                </div>
            </div>
            <div class="album-bottom">{{ albumItem.title }}</div>
        </router-link>


        <router-link v-else-if="type == 'anchorAlbumsList'" :to="`/detail?id=${albumItem.albumInfo.id}`" class="album-container">
            <div class="album-top">
                <img :src="`https://imagev2.xmcdn.com/${albumItem.albumInfo.cover}`"
                    alt="">
                <div class="album-cover-panel">
                    <VideoPlay style="width:15px; height: 15px; vertical-align: bottom;" />
                    {{ Math.floor(albumItem.statCountInfo.playCount / 10000) }}万
                </div>
            </div>
            <div class="album-bottom">{{ albumItem.title }}</div>
        </router-link>

        <router-link v-if="!type" :to="`/detail?id=${albumItem.albumId}`" class="album-container">
            <div class="album-top">
                <img :src="`https://imagev2.xmcdn.com/${albumItem.albumCoverPath}`"
                    alt="">
                <div class="album-cover-panel">
                    <VideoPlay style="width:15px; height: 15px; vertical-align: bottom;" />
                    {{ Math.floor(albumItem.albumPlayCount/1000000) }}亿
                </div>
            </div>
            <div class="album-bottom">{{ albumItem.albumTitle }}</div>
        </router-link>
    </div>
</template>

<script setup lang="ts">
import { VideoPlay } from '@element-plus/icons-vue'
defineProps(['albumItem','type'])


</script>

<script lang="ts">
export default {
    name: 'cardItem'
}
</script>

<style scoped>
.container {
    width: 105px !important;
    height: 150px;
}

.album-container {
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.album-top {
    position: relative;

}

.album-top img {
    width: 104px;
    height: 104px;
    border-radius: 4px;
}

.album-bottom {
    width: 100%;
    font-size: 13px;
    color: #333;
    display:-webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.album-cover-panel {
    width: 95%;
    height: 15px;
    font-size: 12px;
    position: absolute;
    top: 85px;
    color: #fff;
    background-image: linear-gradient(180deg,rgba(3,3,3,0) 9%,rgba(0,0,0,0.58) 100%);
    border-radius: 0 0 5px 5px;
}
</style>